/**
 * @fileoverview Create and control the flow of study pages.
 */

/**
 * Instructions to display for various pages:
 * FP = front page
 * S  = story
 * QA = question & answer
 * LP = last page
 */
var Instruction = {
  'FP': 'Please select a news article to read',
  'S': 'Please read the story.  Click \'Continue...\' when done...',
  'QA': 'Please answer the following question by clicking on the answer in ' +
        'the article'
}

var FullInstruction = {
  'FP': '<p>Thank you for participating in our study.  Due to the nature of our study, please only participate once to receive payment.</p><br>' +
        '<p>In this study, we ask you to read a very short article based on your interest.</p>' +
        '<p>On the following page, we will show you four article topics.  Please select one that seems the most interesting to you to read in detail.  Please take as much time as you want to read it.</p>' +
        //'<p>At the end of the study, you will receive a <b>Confirmation Code</b>.  Please copy and paste this to the input box at the top to receive payment.</p>' +
        '<p>{}</p>',

  'QA': '<p>Please click on the answer to this question on the next page:' +
        '<p id="fi-question">{}</p>' +
        '<p><img src="images/qa.gif"></img></p>',
      /*'<p>On the next page, you will see the article again but slightly grayed out.  ' +
        'Please click anywhere on the gray area (text or chart) to tell us where you would <b>first</b> find the answer to this question:</p>' +
        '<p id="fi-question">{}</p>' +
        '<p>Please be as quick as possible in indicating your answer.  If you can find the answer in multiple places, please select the first one that comes to your mind.  Note that the screen will disappear once you click on it.</p>',*/

  'LP': '<p>Next, please enter this Confirmation Code: <b>{}</b> in the box at the top and press "Enter Code".<br>You will then be redirected to a short survey. You need to complete this survey to receive payment.<br><br>The survey is the last step of the study. Thank you for participating.</p>'
}

/**
 * Creates the first page of the study, seen before user accepts the HIT.
 */
function createPreview() {
  setFullInstruction(globalReplace(FullInstruction.FP, '{}',
      'Please accept the HIT to proceed.'));
}

/**
 * Creates the first page to be displayed. This shows all the available study
 * stories stored in data.js.
 * This assumes the page has an element with ID 'stage'.
 */
function createFrontPage() {
  page = 'FP';
  logPageEvent('FP-Instruction');
  setFullInstruction(globalReplace(FullInstruction.FP, '{}',
      'Click the \'Continue...\' button to proceed...'));
  var fiButton = document.getElementById('fi-button');
  fiButton.onmouseover = onInstructionButtonMouseOver;
  fiButton.onmouseout = onInstructionButtonMouseOut;
  fiButton.onclick = onInstructionButtonClick;

  stage = document.getElementById('stage');
  setInstruction(Instruction.FP);
  for (var i = 0; i < stories.length; i++) {
    createFrontPageStory(stage, i);
  }
}

/**
 * Creates an indivdual story page, with instruction, chart, text, and a
 * 'Continue' button.
 * @param {number} index Of the story in the variable stories in data.js.
 */
 function createStoryPage(index) {
  page = 'S';
  // Logs the event.
  logPageEvent('S');

  clearPage(stage);
  setInstruction(Instruction.S);

  storyIndex = index;
  conditionIndex = getNextCondition();
  stage.appendChild(createStory());

  // Can only draw the chart when it has been added to an existing element,
  // or Gviz will return an error message 'Your browser does not support
  // charts'.
  //chart.draw(data, Options);
  drawChart();
  showButton('Continue...', createQAPage);
}

/**
 * Creates the Question & Answer page that shows an instruction, the chart+text
 * covered by a opaque screen.
 */
function createQAPage() {
  page = 'QA';
  logPageEvent('QA-Instruction');

  var story = stories[storyIndex];
  setFullInstruction(globalReplace(FullInstruction.QA, '{}', story.question));

  setInstruction(Instruction.QA);
  showQuestion(story.question);
  addGlassPaneToStage();
  showButton();
}

/**
 * Adds an opaque element to cover the entire stage.
 */
function addGlassPaneToStage() {
  var glassPane = document.createElement('div');
  stage.insertBefore(glassPane, stage.firstChild);
  glassPane.id = 'glass-pane';
  glassPane.style.width = stage.offsetWidth + 'px';
  glassPane.style.height = stage.offsetHeight + 'px';
  createMouseLogger(glassPane);
}

/**
 * Creates the last page with a single instruction.
 */
function createLastPage() {
  page = 'LP';
  logPageEvent('LP-Instruction');
  setFullInstruction(globalReplace(FullInstruction.LP, '{}',
      trace.getSessionId()));

  clearPage(stage);
  showQuestion();
  setInstruction();

  var fiButton = document.getElementById('fi-button');
  fiButton.style.display = 'none';
}

/**
 * Gets the next condition index.  See Conditions in storycreator.js.
 */
function getNextCondition() {
  return Math.floor(Math.random() * 4);
}

/**
 * Removes all children of input node.
 * @param {Element} node
 */
function clearPage(node) {
  var child;
  while ((child = node.firstChild)) {
    node.removeChild(child);
  }
}

/**
 * Sets the text of the instruction element.
 * @param {string} text Plain text or HTML.
 */
function setInstruction(text) {
  var instruction = document.getElementById('instruction');
  instruction.style.display = text ? 'block' : 'none';
  if (text) {
    instruction.innerHTML = text;
  }
}

/**
 * Sets the text of the full-page instruction.
 * @param {string} text Plain text or HTML.
 */
function setFullInstruction(text) {
  var fiPage = document.getElementById('fi-page');
  fiPage.style.display = text ? 'block' : 'none';
  if (text) {
    document.getElementById('full-instruction').innerHTML = text;
  }
}

/**
 * Logs the event and hides the full-page instruction.
 */
function onInstructionButtonClick() {
  logPageEvent();
  document.getElementById('fi-page').style.display = 'none';
}

/**
 * Changes cursor.
 */
function onInstructionButtonMouseOver(evt) {
  evt = evt || window.event;
  if (evt && evt.target) {
    evt.target.style.cursor = 'pointer';
  }
}

/**
 * Changes cursor.
 */
function onInstructionButtonMouseOut(evt) {
  evt = evt || window.event;
  if (evt && evt.target) {
    evt.target.style.cursor = 'default';
  }
}

/**
 * Shows the question.
 * @param {?string} opt_text Optional, if present, show the question element
 *     with the input text/HTML; Otherwise, hide it.
 */
function showQuestion(opt_text) {
  var question = document.getElementById('question');
  question.style.display = opt_text ? 'block' : 'none';
  if (opt_text) {
    question.innerHTML = opt_text;
  }
}

/**
 * Shows the button.
 * @param {?string} opt_text. Optional, if present, shows the button.
 * @param {?function} opt_onclick Function to trigger when the button is
 *     clicked.
 */
function showButton(opt_text, opt_onclick) {
  var button = document.getElementById('s-button');
  button.style.display = opt_text ? 'inline-block' : 'none';
  if (opt_text) {
    button.value = opt_text;
  }
  if (opt_onclick) {
    button.onclick = opt_onclick;
  }
}

